<template>
  <div class="login">
    <div class="cont">
      <p class="l_text">登录或注册</p>
    </div>

    <div class="cont">
      <div class="box lg">
        <p class="p_hd">登入你的账号</p>
        <div class="pic">
          <p>社交账号登入</p>
          <div>
            <span>
              <img
                src="../../public/img/QQ.png"
                alt="qq"
                width="30px"
                height="30px"
              /> </span
            ><span class="wx"
              ><img
                src="../../public/img/wx.png"
                alt="wx"
                width="30px"
                height="30px"
            /></span>
          </div>
        </div>

        <div class="inp">
          <p>账号</p>
          <input type="text" name="user" v-model="sendct" />
          <p>密码</p>
          <input type="password" name="pwd" v-model="sendpwd"  @keyup="changeColor"/>

          <p><a href="">忘记密码?</a></p>

          <input class="sub" type="submit" value="登录" @click="request" />
        </div>
      </div>
      <div class="box rt">
        <p class="p_hd">注册新账号</p>

        <div class="inp">
          <!-- <form action=""> -->
          <p>
            手机号 <span class="tip" v-show="isTrue">请输入正确的手机号</span>
          </p>
          <input
            class="phone"
            type="text"
            name="phone"
            v-model="phone"
            @keyup="phone1(phone)"
          />
          <p>
            账号
            <span class="tip" v-show="account">账号必须为6-12位数字</span>
          </p>
          <input
            placeholder="账号必须为6-12位数字"
            type="text"
            name="user"
            v-model="user"
            @keyup="ckuse(user)"
          />
          <p>
            密码
            <span class="tip" v-show="pwd2">密码必须为6-12位数字</span>
          </p>
          <input
            placeholder="密码必须为6-12位数字或字母"
            type="password"
            name="pwd"
            v-model="pwd"
            @keyup="ckpwd(pwd)"
          />
          <p>
            确认密码
            <span class="tip" v-show="cfpwd">两次输入的密码不一致</span>
          </p>
          <input
            type="password"
            name="pwd"
            v-model="cfpwd2"
            @keyup="ckpwd2(cfpwd2)"
          />

          <p id="ck_t">
            <input type="checkbox" @change="changeck" id="ck" />
            <a href="">同意条款</a>
          </p>

          <div class="box1" id="box">
            <div class="drag" ref="dragDiv">
              <div class="drag_bg"></div>
              <div class="drag_text">{{ confirmWords }}</div>
              <div
                ref="moveDiv"
                @mousedown="mousedownFn($event)"
                :class="{ handler_ok_bg: confirmSuccess }"
                class="handler handler_bg"
                style="position: absolute; top: 0px; left: 0px"
              ></div>
            </div>
          </div>
          <input class="sub" type="submit" @click="send" value="注册" />
          <!-- </form> -->
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
* {
  font-family: "Jost", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  outline: none;
}

input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #ccc;
  font-size: 16px;
}
// 滑动模块

.drag {
  position: relative;
  background-color: #e8e8e8;
  width: 100%;
  height: 42px;
  line-height: 34px;
  text-align: center;
}
.handler {
  width: 50px;
  height: 42px;
  border: 1px solid #ccc;
  cursor: move;
}
.handler_bg {
  background: #fff
    url("")
    no-repeat center;
}
.handler_ok_bg {
  background: #fff
    url("")
    no-repeat center;
}
.drag_bg {
  background-color: #7ac23c;
  height: 42px;
  width: 0px;
}
.drag_text {
  position: absolute;
  top: 3px;
  width: 100%;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
}

.box1 {
  position: relative;
  width: 480px;
  height: 42px;
  background: #e8e8e8;
  border-radius: 4px;
  // left: 20px;
  top: 20px;
}
.btn1 {
  position: absolute;
  top: 0;
  width: 40px;
  height: 42px;
  text-align: center;
  line-height: 39px;
  border-radius: 4px;
  z-index: 3;
  background-color: #fff;
  border: 1px solid #ccc;
  color: black;
  cursor: pointer;
}
.text {
  position: absolute;
  width: 100%;
  margin: 0 !important;
  text-align: center;
  line-height: 42px;
  display: block;
  z-index: 2;
  /*-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;*/
}
.bg {
  position: absolute;
  height: 100%;
  background-color: yellowgreen;
  z-index: 1;
}

.login {
  width: 100%;
  .cont {
    display: flex;
    justify-content: space-between;
    width: 1200px;
    margin: auto;
    .l_text {
      font-size: 26px;
      font-weight: 300;
      margin-top: 50px;
      z-index: 999;
    }
    .box {
      border: 1px solid #f1f1f1;
      margin-top: 30px;
      width: 570px;
      height: 650px;
      background-color: #fff;
      transition: all linear 0.3s;

      &:hover {
        z-index: 2;
        -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
      }

      .p_hd {
        font-size: 28px;

        margin: 0;
        border-bottom: 0;

        padding: 25px 40px;
        color: #222;
        font-weight: 200;
      }
    }

    .pic {
      padding-left: 40px;

      div {
        margin-top: 20px;
      }
      .wx {
        margin-left: 20px;
      }
    }
  }
  .inp {
    .tip {
      display: inline-block;
      color: red;
      font-size: 12px;
      margin-left: 100px;
    }
    padding-left: 40px;
    p {
      margin-top: 25px;
    }
    input:not(:last-child) {
      width: 480px;
      outline: none;
      height: 42px;
      margin-top: 10px;
      padding-left: 20px;
      transition: all linear 0.2s;
      border: #f1f1f1 solid 1px;
      &:focus {
        border: #7f87ab solid 1px;
      }
    }
    input:last-child {
      font-size: 18px;
      margin-top: 50px;
      width: 480px;
      height: 42px;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      transition: all linear 0.2s;
    }
  }
  #wrapper {
    margin-top: 50px;
    width: 480px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    background-color: green;
    position: relative;
    cursor: pointer;
  }
  .rt {
    p {
      margin-top: 10px;
    }
    p:first-child {
      margin: 0;
    }
    input:not(:last-child) {
      margin-top: 3px !important;
    }

    #wrapper {
      margin-top: 36px;
    }
    #ck {
      margin: 0;
      width: 26px;
      height: 20px;
    }
    #ck_t {
      position: relative;
      a {
        position: absolute;
        left: 30px;
        top: -1px;
      }
    }
  }
}
</style>


<script>
export default {
  data() {
    return {
      needLog:false,
      sendct: "",
      sendpwd: "",
      test: true,
      cfpwd2: "",
      phone: "",
      user: "",
      pwd: "",
      isTrue: false,
      account: false,
      pwd2: false,
      cfpwd: false,
      changeck2: true,
      swipe: true,

      beginClientX: 0 /*距离屏幕左端距离*/,
      mouseMoveStata: false /*触发拖动状态 判断*/,
      maxwidth: "" /*拖动最大宽度，依据滑块宽度算出来的*/,
      confirmWords: "拖动滑块验证" /*滑块文字*/,
      confirmSuccess: false /*验证成功判断*/,
    };
  },
  methods: {
    //  登入请求
    request() {
        if (!this.needLog) {
          
      this.$axios
          .post(
            "http://localhost:520/log",
            "name=" + String(this.sendct) + "&password=" + String(this.sendpwd)
          )
          .then((data) => {
            console.log(data);
            if (data.data.code == "200") {
              alert("登录成功");
              this.needLog=true
              sessionStorage.setItem('name', this.sendct);
             location.reload();
             

            } else if (data.data.code == "400") {
              alert("用户名或密码错误");
            } else if (data.data.code == "404") {
              alert("网络出现了小波动 请重试");
            }
          });  
}else{
  alert('你已经登入')
}
    },

    // 滑动模块
    mousedownFn: function (e) {
      if (!this.confirmSuccess) {
        e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件
        this.mouseMoveStata = true;
        this.beginClientX = e.clientX;
      }
    }, //mousedoen 事件
    successFunction() {
      this.confirmSuccess = true;
      this.confirmWords = "验证通过";
      this.swipe = false;
      document.getElementsByClassName("sub")[1].disabled = false;
      document.getElementsByClassName("sub")[1].style.backgroundColor =
        "#7f87ab";

      if (window.addEventListener) {
        document
          .getElementsByTagName("html")[0]
          .removeEventListener("mousemove", this.mouseMoveFn);
        document
          .getElementsByTagName("html")[0]
          .removeEventListener("mouseup", this.moseUpFn);
      } else {
        document
          .getElementsByTagName("html")[0]
          .removeEventListener("mouseup", () => {});
      }
      document.getElementsByClassName("drag_text")[0].style.color = "#fff";
      document.getElementsByClassName("handler")[0].style.left =
        this.maxwidth + "px";
      document.getElementsByClassName("drag_bg")[0].style.width =
        this.maxwidth + "px";
    }, //验证成功函数
    mouseMoveFn(e) {
      if (this.mouseMoveStata) {
        let width = e.clientX - this.beginClientX;
        if (width > 0 && width <= this.maxwidth) {
          document.getElementsByClassName("handler")[0].style.left =
            width + "px";
          document.getElementsByClassName("drag_bg")[0].style.width =
            width + "px";
        } else if (width > this.maxwidth) {
          this.successFunction();
        }
      }
    }, //mousemove事件
    // moseUpFn(e) {
    //   this.mouseMoveStata = false;
    //   var width = e.clientX - this.beginClientX;
    //   if (width < this.maxwidth) {
    //     document.getElementsByClassName("handler")[0].style.left = 0 + "px";
    //     document.getElementsByClassName("drag_bg")[0].style.width = 0 + "px";
    //   }
    // }, //mouseup事件
    // 滑动模块结束

    phone1(phone) {
      if (
        !/^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/.test(
          phone
        )
      ) {
        this.isTrue = true;
      } else {
        this.isTrue = false;
      }
    },

    ckuse(user) {
      if (!/^[0-9]{6,12}$/.test(user)) {
        this.account = true;
      } else {
        this.account = false;
      }
    },

    ckpwd(pwd) {
      if (!/^[0-9A-Za-z]{6,12}$/.test(pwd)) {
        this.pwd2 = true;
      } else {
        this.pwd2 = false;
      }
    },
    ckpwd2(cfpwd2) {
      if (this.pwd != cfpwd2) {
        this.cfpwd = true;
      } else {
        this.cfpwd = false;
      }
    },
    changeck() {
      this.changeck2 = !this.changeck2;
    },

    send() {
      if (
        !this.isTrue &&
        !this.account &&
        !this.pwd2 &&
        !this.cfpwd &&
        !this.changeck2 &&
        !this.swipe
      ) {

        console.log(this.user,this.user);
        this.$axios
          .post(
            "http://localhost:520/reg",
            "name=" + String(this.user) + "&password=" + String(this.pwd)
          )
          .then((data) => {
            console.log(data);
            if (data.data.code == "200") {
              alert("注册成功");
            } else if (data.data.code == "400") {
              alert("用户名已存在");
            } else if (data.data.code == "404") {
              alert("网络出现了小波动 请重试");
            }
          });
      } else {
        alert("请将信息填写完整");
      }
    },
    changeColor(){
      if (this.sendct.length!=0&&this.sendpwd.length!=0) {
         document.getElementsByClassName("sub")[0].disabled = false;
      document.getElementsByClassName("sub")[0].style.backgroundColor =
        "#7f87ab";
      }
    }
  },
  watch: {},

  mounted() {
    this.maxwidth =
      this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
    document
      .getElementsByTagName("html")[0]
      .addEventListener("mousemove", this.mouseMoveFn);
    document
      .getElementsByTagName("html")[0]
      .addEventListener("mouseup", this.moseUpFn);
    $(".sub").attr("disabled", true);
    this.needLog = sessionStorage.getItem('name')
  
  },
};
</script>


